<template>
    <vxe-layout-container vertical>
        <vxe-layout-header class="layout-header" style="height: 80px;">
            <el-select v-model="tableName" :size="componentSize" @change="handleTableChange">
                <el-option v-for="item in tableOptions" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
            <el-button @click="handleSave" type="success" :size="componentSize">保存</el-button>
        </vxe-layout-header>
        <vxe-layout-body class="layout-body">
            <vxe-grid ref="maingrid" v-bind="GridOptions">                
            </vxe-grid>
        </vxe-layout-body>
    </vxe-layout-container>
</template>
<style></style>
<script>
import CURDHelper from '@/utils/CURDHelper'
import PageConfig from '@/utils/pageConfig'
export default {
    name: 'BaseCustomer',
    components: {

    },
    data() {
        const isQueryItemRender ={
            name: 'VxeSelect',
            options: [
                { label: '是', value: 'Y' },
                { label: '否', value: 'N' },
            ]
        }
        const queryComponentItemRender ={
            name: 'VxeSelect',
            options: [
                { label: 'Input', value: 'input' },
                { label: 'Select', value: 'select' },
                { label: 'DateRange', value: 'daterange' },
                { label: 'Radio', value: 'radio' }
            ]
        }
        return {
            isQueryItemRender,
            queryComponentItemRender,
            componentSize: PageConfig.ComponentSize,
            duration: PageConfig.Duration,
            baseApiUrl: '/api/Tpmpageconfig',
            GridOptions: {
                id: 'Platform_MainGrid',
                border: true,
                stripe: true,
                loading: false,
                size: PageConfig.ComponentSize,
                height: 700,
                columnConfig: {
                    resizable: true
                },
                rowConfig: {
                    isHover: true,
                    isCurrent: true
                },
                checkboxConfig: {
                    highlight: true,
                    range: true
                },
                toolbarConfig: {
                    custom: true,
                },
                customConfig: {
                    mode: 'drawer',
                    storage: true
                },
                editConfig: {
                    trigger: 'click',
                    mode: 'row',
                    showStatus: true
                },
                columns: [
                    { field: 'columnname', title: '字段名称', minWidth: 80 },
                    { field: 'nullable', title: '是否可空', minWidth: 80 },
                    { field: 'columntype', title: '数据类型', minWidth: 80 },
                    { field: 'columncomment', title: '字段说明', minWidth: 80 },
                    { field: 'isquery', title: '是否查询条件', minWidth: 80 ,editRender: isQueryItemRender},
                    { field: 'querycomponent', title: '查询组件', minWidth: 80 ,editRender: queryComponentItemRender },
                    { field: 'querycomponenttitle', title: '查询组件名称', minWidth: 80 ,editRender: { name: 'VxeInput' } },
                ],
                data: []
            },
            tableOptions: [],
            tableName: ''
        }
    },
    created() {
        this.GetTableData();
    },
    methods: {
        GetTableData() {
            let request = {
                isPaging: false,
                pageSize: 1,
                pageIndex: 1,
                queryConditions: [],
                orderByConditions: []
            }
            CURDHelper.Query(request, `${this.baseApiUrl}/GetTableList`)
                .then(res => {
                    res.data.forEach(item => {
                        this.tableOptions.push({
                            label: item,
                            value: item
                        })
                    });
                }).catch(err => {
                    VxeUI.modal.message({
                        content: err,
                        status: 'error',
                        duration: this.duration
                    })
                })
        },
        handleSave() {
            this.DoSave();
        },
        handleTableChange() {
            this.DoQueryTableColumns();
        },
        DoSave() {
            let pageConfig = {
                QueryConfig:[],
                GridConfig:{
                    
                }
            }
            this.GridOptions.data.forEach(item => {
                if (item.isquery == 'Y') {
                   pageConfig.QueryConfig.push({
                    title:item.querycomponenttitle,
                    type:item.querycomponent,
                    value:'',
                    placeholder:`请输入${item.querycomponenttitle}信息`
                   })
                } 
            })
            console.log(pageConfig)
        },
        DoQueryTableColumns() {
            CURDHelper.GetWithParams(`${this.baseApiUrl}/GetTableColumns`, { tableName: this.tableName })
                .then(res => {
                    res.data.forEach(item => {
                        this.GridOptions.data.push({
                            columnname: item.columnname,
                            nullable: item.nullable,
                            columntype: item.columntype,
                            columncomment: item.columncomment,
                            isquery: 'N',
                            querycomponent: 'input',
                            querycomponenttitle:item.columncomment
                        })
                    });
                }).catch(err => {
                    VxeUI.modal.message({
                        content: err,
                        status: 'error',
                        duration: this.duration
                    })
                })
        }
    }
}
</script>